<!--点击查看图片组件,示例如下：
  <TiyPhotoView v-model="status.modalImage.isShow" :tiy-photo="status.modalImage.url"></TiyPhotoView>
-->
<template>
      <div>
        <tag color="blue" style="margin-bottom: 1rem;" v-if="employeeName!=null && employeeName!=''">该用户的站内信负责人:{{employeeName}}</tag><br>
        <Dropdown trigger="click" @on-visible-change="showHide">
        <div style="min-width: 200px">
          <Button @on-change="inputChange" long v-if="!isSelectedEmployee">
            {{choosedEmployee}}
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <Button @click="clearSelectedEmployee" long  v-if="isSelectedEmployee">
            {{choosedEmployee}}
            <Icon type="md-close"></Icon>
          </Button>
        </div>
      <DropdownMenu slot="list">
        <div style="padding: 0.7rem">
          <div style="display: flex;flex-direction: column;">
            <ul v-show="datas.length > 0">
              <li v-for="item in filterDatas" v-show="filterModel"><a @click="choseValue(item)">{{item.userName}}</a></li>
              <li v-for="item in datas" v-show="!filterModel"><a @click="choseValue(item)">{{item.userName}}</a></li>
            </ul>
            <div style="width:100%" v-show="isWebResult">
              <Page  :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size-opts="page.options" />
            </div>
          </div>
          <div v-show="datas.length == 0" style="padding: 2em;text-align: center">
             查询中…
          </div>
          <div v-show="filterModel && filterDatas.length == 0" style="padding: 2em;text-align: center">
            没有匹配结果
          </div>
          <div v-show="isWebResult && datas.length == 0" style="padding: 2em;text-align: center">
            查询结果为空
          </div>
        </div>
      </DropdownMenu>

    </Dropdown>
      </div>
</template>

<script type="text/ecmascript-6">

  export default {
    data() {
      return {
        datas: [],
        filterDatas:[],
        choosedEmployee:"请选择员工",
        filterModel :false,
        isWebResult:false,
        isSelectedEmployee:false,
        page:{
          total: 0,
          pageNum: 1,
          pageSize: 40,
          options: [40, 60, 80, 120],
        }
      }
    },
    props: {
      choosed: {
        id:"",
        name:""
      },
      employeeName:'',
      clear:false //是否清除已选择选项
    },
    watch:{
      choosed(value){
        if (value.id !== ""){
          this.choosedEmployee = value.name;
          this.isSelectedEmployee = true;
        }else{
          this.choosedEmployee = "请选择员工";
          this.isSelectedEmployee = false;
        }
      },
      choosedEmployee(value){
        if(this.filterModel){
          if (value !== '') {
            setTimeout(() => {
              this.filterDatas = this.datas.filter(item => item.userName.indexOf(value) > -1);
            }, 200);
          } else {
            this.filterModel = false;
          }
        }
      },
      clear(value){
        if(value){
            this.clearSelectedEmployee();
        }
      }
    },
    methods: {
      showHide(isShow){
        if (isShow){
          if (this.datas.length == 0){
            this.webList()
          }
        }
      },
      webList(){
        let self = this
        this.$apiRole.getEmployee({"pageSize": self.page.pageSize, "pageNum":self.page.pageNum})
          .then(function (response) {
            self.isWebResult = true
            if (response.success) {
              self.datas.splice(0,self.datas.length) ;
              let page = response.result;
              // tiyData.tData.standsList.push(...page.list);
              // tiyData.tPage.total = page.total;
              // response.result.list.forEach(
                // function (item) {
              self.datas.push(...page.list);
              self.page.total = page.total;
                // }
              // )
            } else {
              self.$Message.error(response.errorMessage);
            }
          });
      },
      inputChange(){
        this.filterModel = true;
      },
      choseValue(value) {
        this.filterModel = false;
        this.choosedEmployee = value.userName;
        this.isSelectedEmployee = true;
        this.$emit('chooseEmployee', value)
      },
      clearSelectedEmployee(){ //清除已选员工
        this.choosedEmployee = "请选择员工";
        this.isSelectedEmployee = false;
        this.$emit('chooseEmployee', null);
      },
      changePageNum(pageNum) {
        this.page.pageNum = pageNum;
        this.datas.length = 0;
        this.isWebResult = false;
        this.webList()
      },
      changePageSize(pageSize) {
        this.page.pageNum = 1;
        this.datas.length = 0;
        this.page.pageSize = pageSize;
        this.isWebResult = false;
        this.webList()
      },
    },

  }
</script>

<style lang="less" scoped>
  @import  (once,optional)  "../css/base";
  .tiy_search{
    min-width: 25rem;
  }
  ul {
    list-style: none;
    width: 30em;
  }
  li {
    width: 7em;
    text-align: left;
    padding: 0.5em;
    display: inline;
    line-height: 20px;
    float:left;
  }

  a {color:black;}
  a:link {color:black;}
  a:visited {color:black;}
  a:hover {color:red;}
  a:active {color:black;}

</style>
